<template>
    <div class="login">
        <div class="inner">
           <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <el-form-item label="用户名：">
                <el-input size="mini" prop="username" v-model="form.name"  prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item label="密码：">
                <el-input size="mini" prop="password" placeholder="请输入密码" v-model="form.password" show-password prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <div class="btns">
                <el-button type="primary" @click="Submit('form')"  round>登陆</el-button>
                <el-button type="text" @click="goregister">没有账号？去注册</el-button>
            </div>
        </el-form>
        </div>
    </div>
</template>
<style scoped>
.login{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(73,125,167);
}
.inner{
    width: 450px;
    display: flex;
    padding-left: 50px;
    flex-wrap: wrap;
    align-content: space-around;
    height: 300px;
    border-radius: 20px;
    background-color: #fff;
}
.btns{
    display: flex;
    justify-content: space-around;
    width: 400px;
}
</style>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          password:""
        },
        namemsg:"",
        passmsg:"",
        rules:{
          // username
          username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
          // password
        }
      }
    },
    methods: {
      Submit(formName) {

        // console.log(this.form);
          this.$refs[formName].validate((valid) => {
            if (valid) {
               if(this.form.name=="admin"&&this.form.password=="123456"){
                this.$store.commit("changelogin",true)
                this.$message({
                  showClose: true,
                  message: '登陆成功',
                  type: 'success',
                  duration:1500
                });
                  this.$router.push("/home")
              }
            } else {
              // console.log('error submit!!');
              this.$message({
                showClose: true,
                message: "内容验证失败",
                type: 'error',
                duration:1500
              });
              return false;
            }
            });
      },
      goregister(){
          this.$router.push("/register")
      }
    }
  }
</script>
<style scoped>
.el-input{
width: 200px;
}
</style>